<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="测试">
    <meta name="keywords" content="图片上传">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">

    <title>测试页面</title>

    <script src="js/lib/jquery.min.js"></script>
    <!-- 引入Vue -->
    <script src="//v1.vuejs.org/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!-- 引入组件库 -->
    <script src="//unpkg.com/iview@1.0.1/dist/iview.min.js"></script>


</head>
<body >
<h1>第一张图片</h1>
<input type="file" name="file"/>

<template>
    <Upload action="/upload">
        <i-button type="ghost" icon="ios-cloud-upload-outline">上传文件</i-button>
    </Upload>
</template>

<a href="/download"> download</a>
<div id="app">
    <i-button @click="show">Click me!</i-button>
    <Modal :visible.sync="visible" title="Welcome">欢迎使用 iView</Modal>
</div>

<div id="file">
    <upload-file />
</div>

<script type="text/x-template" id="file-upload-tpl">
    <Upload action="/upload">
        <i-button type="ghost" icon="ios-cloud-upload-outline">上传文件</i-button>
    </Upload>
</script>

</body>

<script>
// 每个模块的js 都在 module 命名空间下, 比如: module.userList
    var app = new Vue({
        el: '#app',
        data: {
            visible: false
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        }
    });

    var file = new Vue({
        el: '#file',
        components:{
            'upload-file': {
                template: '#file-upload-tpl'
            }
        }
    });


</script>
</html>